2022基于webpack从0搭建vue项目，vue2.0和vue3.0，解决了中间的报错问题。 |
您所在的位置：网站首页 › webpack 搭建项目 › 2022基于webpack从0搭建vue项目，vue2.0和vue3.0，解决了中间的报错问题。 |
2022基于webpack从0搭建vue项目，vue2.0和vue3.0，解决了中间的报错问题。
|
创建项目目录文件 webpackProject 在桌面鼠标右键新建 webpackProject 文件夹 初始化项目的目录 生成 --pagege.json 的作用就是依赖的单记录，启动命令，版本信息，包管理器 命令 npm init -y 安装 webpack CLI命令 npm install --save-dev webpack-cli 安装 webpack命令 npm i webpack -D 对 -g -S -D 的补充 npm i xx -g：npm install xx --global的简写，对模块进行全局安装。 所谓全局安装，是指把模块安装到操作系统上，全局是指操作系统，全局安装完成后，一般会安装到AppDataAppData\Roaming\npm目录下。 如：npm install webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。 npm i xx -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 对象。 局部的意思是只针对当前项目，模块一般安装到项目文件夹下的node_modules文件夹下。 devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包， 因为这些工具只是你用来打包代码的，是用来识别特定文件以及代码，帮助我们生产最终文件的。如npm i vue-loader vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件，经过配置后即可在项目中解析vue模板 npm i xx -S：npm install xx --save 的简写，同上也是对模块进行局部安装，不同的是模块写入到 dependencies对象。 模块同上一样将安装到项目文件夹下的node_modules文件夹下。 dependencies对象，这个与devDependencies不同，是需要发布到生产环境中的，就比如你要跑一个基于vue的项目， 所以需要vue.js来支持，vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中， 并一同发布到生产环境。 对插件版本的补充 可以cv到package.json 直接 npm i { "name": "webpackProject", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "start": "webpack --config webpack.config.js", "serve": "webpack serve" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.17.5", "@babel/preset-env": "^7.16.11", "babel-loader": "^8.2.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.6.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "sass": "^1.49.8", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", "url-loader": "^4.1.1", "vue-loader": "^17.0.0", "vue-template-compiler": "^2.6.14", "webpack": "^5.69.1", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" }, "dependencies": { "vue": "^3.2.31" } } 在根目录下创建一个 webpack.config.js 文件 // 导入核心模块 path const path = require('path') // 导入自动生成html文件的插件 const HtmlWebpackPlugin = require('html-webpack-plugin') // 导入自动清除 dist 目录的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 配置文件 module.exports = { // 配置入口 entry: './src/main.js', // webpack.config.js 文件 配置出口 output: { filename: 'main[hash:8].js', // 出口文件的名称 'main[hash:8].js' 清除缓存 path: path.join(__dirname, '/dist') // 出口文件生成的路径 }, // 配置 mode, development 开发环境 production 生产环境 mode: 'production', // 配置解析 resolve: { alias: { // key: value '@': path.join(__dirname, 'src') }, // 配置可省略的后缀 extensions: ['.js', '.css', '.less', '.vue'] }, // 配置源码映射 // devtool: 'source-map', // 配置 loader module: { // 配置规则 rules: [] }, // 配置 plugin plugins: [ // 自动生成html文件的插件 new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(__dirname, './public/index.html') }), // 自动清除 dist 目录插件 new CleanWebpackPlugin(), // 配置 vue loader 插件 ], // 配置开启服务器的信息 devServer: { static: { directory: path.join(__dirname, 'dist'), }, compress: true, port: 80, }, performance: { hints: false } }按照上述配置把对应文件给创建好，如果没有文件就会报错， 安装插件 html-webpack-plugin clean-webpack-plugin? 是因为 webpack.config.js 里面有用到 npm i -D html-webpack-plugin clean-webpack-plugin 配置我们的入口文件在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少 打包前 function fn() { console.log('孙志豪') } fn() 打包后 会多一个 dist 文件 把 function 去掉了 console.log('孙志豪') 在根目录里面新建一个 public 文件夹? 在新建一个 index.html 输入 ! 回车 初始化 ? 写入一个 div 为 id=“#app” 找到 package.json 文件 配置打包命令 "scripts": { "build": "webpack --config webpack.config.js" }, 然后运行打包的命令npm run build 此时会多一个叫 dist 的文件夹
npm i webpack-dev-server -D 找到 package.json 文件 配置启动服务 "scripts": { "build": "webpack --config webpack.config.js", "serve": "webpack serve" }, 在webpack.config.js 配置开启服务器的信息 devServer: { static: { directory: path.join(__dirname, 'dist'), // 出口写什么这里就写什么 }, port: 8080, // 配置端口号 open: true, // 自动打开浏览器 hot:true, // 开启模块的热更新 }, 运行服务npm run serve
这些操作之前需要先安装 ‘style-loader’, ‘css-loader’, ‘sass-loader’ 命令 npm i css-loader style-loader sass sass-loader -D 1、在src，目录下新建一个你的css文件 2、 安装完成 在 webpack.config.js 找到 rules 配置 css loader // 配置规则 rules: [ // * 解析css loader { test: /\.css$/, use: [ "style-loader", "css-loader" ] }, // * 解析Scss样式 注意： 配置的顺序是反着来的 从大到小 从右到左 { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, ] 字体 图片 或者别的资源 url-loader file-loader url-loader 依赖于 file-loader 命令 npm i url-loader file-loader -D 安装完成 在 webpack.config.js 找到 rules 配置 rules: [ // * 解析图片 的 loader { test: /\.(png|jpg|gif|svg|webp|jpeg)$/, use: "url-loader" }, ] 安装 babel-loader 用来 让 es6代码让浏览器识别的了命令 npm install -D babel-loader @babel/core @babel/preset-env rules: [ // * 解析es6语法 转换 es5 { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, ]官网： https://www.webpackjs.com/loaders/babel-loader/ vue-loader 这样安装是 vue3.0 版本官方网址 https://vue-loader.vuejs.org/zh/ 命令 npm i vue 命令 npm install -D vue-loader vue-template-compiler 引入 vue 插件 // webpack.config.js 文件 const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { rules: [ // * vue配置loader { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }配置完 在main.js里面 写入配置挂载 import { createApp } from 'vue' import App from './App.vue'// 创建app.vue 入口组件 createApp(App).mount('#app') 安装vue 2.0 的 vue 版本配置 以及报错的解决vue-loader 不能为 16 以上 vue 版本为 2.6.1 必须 和 vue-template-compiler 2.6.1 一致 命令 npm i [email protected] [email protected] -D 命令 npm i [email protected] 引入 vue 插件 // webpack.config.js 文件 const { VueLoaderPlugin } = require('vue-loader') module.exports = { module: { rules: [ // * vue配置loader { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }找到min.js文件 配置 import Vue from "vue"; import App from "./App.vue"; new Vue({ render: (h) => h(App), }).$mount("#app");创建 App.vue 文件 写代码吧小伙子 |
【本文地址】
今日新闻 |
推荐新闻 |